<template>
	<view class="appCenter ">
		<u-toast ref="uToast" />
		<view class="appTabs wrop" v-if="pageShow">
			<!-- <u-tabs :list="courseData" is-scroll :current="current" @change="tabChange" gutter="30" duration="0.2" bar-height="6"></u-tabs> -->
			<view class="header_search">
				<view class="search box box-align-center box-pack-between">
					<input type="text" v-model="install" placeholder="请输入您要搜索的应用名称" placeholder-class="placeholder"
						placeholder-style="color:#a9a9a9;font-size:24rpx" />
					<view class="search_img" @tap="btnBClick">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/shousou.png" mode=""></image>
					</view>
				</view>
				<u-tabs-swiper ref="uTabs" count="cate_count" :current="current" :list="courseData" is-scroll
					@change="tabChange" style="margin-top: 40rpx;"></u-tabs-swiper>
			</view>
			<view class="">
				<view class="mescroll-upwarp data_hint" v-if="upLoadType === 1">
					<view class="upwarp-progress mescroll-rotate"></view>
					<view class="upwarp-tip">加载中 ...</view>
				</view>
				<view v-if="upLoadType === 2" style="margin-top: 40rpx;" class="data_hint">
					<u-empty text="数据为空" mode="data" icon-size="160" font-size="30"></u-empty>
				</view>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="item in courseData" :key="item.id">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scroll="scroll" :scroll-top="scrollTop"
						:scroll-with-animation="true">
						<view class="appInstall">
							<view class="appInfo box box-align-center box-pack-between" v-for="item in appData"
								:key="item.id">
								<view class="box box-align-center">
									<view class="app_img">
										<image :src="item.app_img" mode=""></image>
									</view>
									<view class="app_text">
										<view class="text_title">{{item.app_name}}</view>
										<view class="text">
											{{item.app_size | zhDate}}{{item.app_installs ? ' | '+item.app_installs + '次下载' : ''}}
										</view>
										<view class="text">{{item.app_remarks ? item.app_remarks : ''}}</view>
									</view>
								</view>
								<view class="">
									<view class="ann_button">
										<button type="default" @click="appPush(item)" size="mini"
											:class="item.hide ? 'hide' : ''"
											:disabled="item.hide ? true: false">{{item.hide ? '已推送' : '推送'}}</button>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="empty" v-else>
			<u-empty text="请绑定设备" src="" icon-size="220" font-size="36"></u-empty>
		</view>
		<mescroll-top :value="scrollVal" @toTopClick="toTopClick"></mescroll-top>

		<u-popup v-model="uploadShow" mode="center" border-radius="18">
			<view class="txt_center">
				<view class="title">对不起，当前暂未收录该应用！</view>
				<view class="txt">您可以选择：<text>反馈给我们</text> 或 <text @click="uploadApp">手动上传应用</text>。</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSubject,
		getAdminApp,
		appInstall,
		queryParentApp,
		deleteParent,
		appPush
	} from '@/api/application.js'
	import mescrollTop from '@/components/mescrollTop.vue'
	export default {
		components: {
			mescrollTop
		},
		data() {
			return {
				courseData: [],
				current: 0,
				swiperCurrent: 0,
				appData: [],
				install: '',
				pageShow: true,
				upLoadType: 1,
				scrollVal: false,
				scrollTop: 0,
				oldTop: 0,
				appId: 0,
				uploadShow: false
			}
		},

		onLoad() {
			this.getSubject()
		},
		onShow() {
			//this.getqueryParentApp()
			if (uni.getStorageSync('snId')) {
				this.pageShow = true
			} else {
				this.pageShow = false
			}
		},
		methods: {
			uploadApp() {
				uni.navigateTo({
					url: '/pages_subpackage/appUploading/index'
				})
			},
			appPush(item) {
				uni.navigateTo({
					url: '/pages_subpackage/appDetails/index?appId=' + item.id
				})
			},
			scroll(e) {
				this.oldTop = e.detail.scrollTop
				if (e.detail.scrollTop > 1000) { //当距离顶部大于1000时显示回到顶部按钮
					this.scrollVal = true
				} else {
					this.$nextTick(() => {
						this.scrollVal = false
					});
				}
			},
			toTopClick() {
				this.scrollTop = this.oldTop
				this.$nextTick(() => {
					this.scrollTop = 1
					this.oldTop = 1
				});
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				this.appData = []
				this.upLoadType = 1
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				// if (this.courseData[current].name == this.courseData[this.courseData.length - 1].name) {
				// } else {
				// 	this.myAppShow = false
				// 	this.getAdminApp(1, {
				// 		name: this.courseData[current].name
				// 	})
				// }
				this.getAdminApp(1, {
					id: this.courseData[current].id
				})
			},
			//获取科目数据
			getSubject() {
				getSubject({
					sId: uni.getStorageSync('snId')
				}).then(res => {
					this.courseData = res.data
					this.getAdminApp(1, {
						id: this.courseData[this.current].id
					})
				}).catch(err => {
					this.courseData = []
				})
			},
			//tabs的change事件
			tabChange(index, val) {
				this.appData = []
				this.swiperCurrent = index;
				this.toTopClick()
			},
			//获取应用信息
			getAdminApp(type, params) {
				let data = {
					type: type,
					snId: uni.getStorageSync('snId'),
					...params
				}
				getAdminApp(data).then(res => {
					this.upLoadType = 0
					this.appData = res.data
				}).catch(err => {
					this.upLoadType = 2
					this.appData = []
				})
			},
			btnBClick() {
				this.$u.debounce(this.gotoApp, 1000)
			},
			//前往安装应用
			gotoApp() {
				if (!this.install) return this.$refs.uToast.show({
					title: '请输入关键字',
					type: 'error',
					icon: false
				})
				getAdminApp({
					type: 2,
					appName: this.install,
					snId: uni.getStorageSync('snId')
				}).then(res => {
					uni.navigateTo({
						url: '/pages/application/installApp/index?install=' + this.install
					});
				}).catch(err => {
					this.uploadShow = true
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	.header_search {
		position: fixed;
		top: 10rpx;
		width: 100%;
		left: 0;
		padding: 0 50rpx;
		background-color: #FFFFFF;
		z-index: 999;
	}

	.hide {
		background-color: #999999 !important;
	}

	.swiper-box {
		flex: 1;
		padding-top: 180rpx;
	}

	.data_hint {
		padding-top: 180rpx;
	}

	.swiper-item {
		height: 100%;
	}

	.wrop {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.appCenter {
		background-color: #FFFFFF;

		image {
			width: 100%;
			height: 100%;
		}

		.search {
			color: #333333;
			padding: 20rpx;
			border-radius: $uni-border-radius-lg;
			overflow: hidden;
			// background-image: -webkit-linear-gradient(90deg, #ec8f19 0%, #f75e50 100%);
			background-color: #eeeeee;

			input {
				width: 85%;
			}

			.search_img {
				height: 40rpx;
				width: 40rpx;
				overflow: hidden;
			}
		}

		.appTabs {
			//padding: 180rpx 40rpx 0 40rpx;

			.appInstall {
				margin-top: 40rpx;
				padding: 0 40rpx 0 40rpx;

				.appInfo {
					margin-top: 40rpx;
					padding-bottom: 10rpx;
					border-bottom: 1rpx solid #e9e9e9;

					.app_img {
						height: 100rpx;
						width: 100rpx;
						margin-right: 20rpx;
					}

					.app_text {
						color: #333333;

						.text_title {
							font-size: 28rpx;

							text {
								background-color: #fd5872;
								padding: 0 20rpx;
								display: inline-block;
								color: #FFFFFF;
								margin-left: 20rpx;
								font-size: 22rpx;
							}
						}

						.text {
							font-size: 22rpx;
						}
					}

					.ann_button {
						button {
							border: none;
							// background-image: -webkit-linear-gradient(90deg, #ec8f19 0%, #f75e50 100%);
							background-color: #4880ff;
							font-size: 24rpx;
							border-radius: $uni-border-radius-lg;
							color: #ffffff;
							text-align: center;
							min-width: 135rpx;
						}
					}
				}

				.appInfo:last-child {
					border-bottom: none;
				}
			}
		}
	}

	/*提示文本 */
	.mescroll-upwarp {
		text-align: center;
		margin-top: 40rpx;
	}

	.mescroll-upwarp .upwarp-tip,
	.mescroll-upwarp .upwarp-nodata {
		display: inline-block;
		font-size: 28rpx;
		vertical-align: middle;
		/* color: gray; 已在style设置color,此处删去*/
	}

	.mescroll-upwarp .upwarp-tip {
		margin-left: 16rpx;
	}

	/*旋转进度条 */
	.mescroll-upwarp .upwarp-progress {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid gray;
		border-bottom-color: transparent !important;
		/*已在style设置border-color,此处需加 !important*/
		vertical-align: middle;
	}

	/* 旋转动画 */
	.mescroll-upwarp .mescroll-rotate {
		animation: mescrollUpRotate 0.6s linear infinite;
	}

	@keyframes mescrollUpRotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.txt_center {
		padding: 30rpx;
		letter-spacing: 2rpx;

		.title {
			font-size: 32rpx;
			line-height: 80rpx;
		}

		.txt {
			text {
				color: #0480ff;
			}
		}
	}
</style>
